<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/mi_project/css/base.css">
    <link rel="stylesheet" href="/mi_project/css/login.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2917027_rvml2v6pua.css">
    <script src="/mi_project/js/jquery.js"></script>
    <link rel="stylesheet" href="/mi_project/layui/css/layui.css">
</head>
<body>
    <div class="leftbanner">
        <div></div>
    </div>
    <div class="rightcontent">
        <header></header>
       <main>
           <header></header>
           <div class="loginBox">
               <main>
                   <div class="logintext">
                       <span>注册</span>
                   </div>
                   <form action="">
                    <div><input type="text" class="loginInput username" placeholder="手机"></div>
                    <div class="cleat-fix"><input type='password' class="loginInput password"placeholder="密码"><div class="passwordShow"></div></div>
                    <div class="verifyCodeDiv cleat-fix"><input type='text' class="loginInput verifyCode"placeholder="验证码"><div class="verifyCodeButton  layui-btn layui-btn-primary layui-border-black layui-btn-sm">获取验证码</div></div>
                    <div><input type="button" class="loginInput loginButton" value="注册"></div>
                   </form>
               </main>
           </div>
       </main>
    </div>
</body>
</html>
<script>
    //左banner图效果
    document.querySelector(".leftbanner div").style.height=window.innerHeight+"px";
    window.addEventListener("resize",function(){
        if(window.innerWidth<1200&&window.innerWidth>1000){
            document.querySelector(".leftbanner").style.width="200px"
        }else if(window.innerWidth<1000){
            document.querySelector(".leftbanner").style.width="0px"
        }else{
            document.querySelector(".leftbanner").style.width="375px"
        }
        document.querySelector(".leftbanner div").style.height=window.innerHeight+"px";
    });

    //右边
    let urls ="http://phpclub.org.cn:8080/api";
    $('.verifyCodeButton').click(function(){
        $.ajax({
        url:urls+"/user/sendVerify",
        data:{mobile:$('.username').val()},
        success: function(backData){
                console.log(backData.data.verifyCode);
                if(backData.code==0){
                    alert(backData.data.verifyCode)
                }else{
                    alert(backData.msg);
                }
            }
    })
    })
    $('.loginButton').click(function(){
        $.ajax({
        url:urls+"/user/register",
        data:{mobile:$('.username').val(),verifyCode:$('.verifyCode').val(),password:$(".password").val()},
        success: function(backData){
                if(backData.code==0){
                    alert('注册成功');
                    location.href="login.html"
                }else{
                    alert(backData.msg);
                }
            }
    })
    })
</script>